<template>
  <FModal ref="FModal" header="审批节点配置" width="800" @ok="updateUserTask">
    <FSection title="属性设置">
      <el-row class="f-row">
        <el-col class="f-col f-text-right" :span="4">节点名称:</el-col>
        <el-col class="f-col" :span="18">
          <el-input :disabled="!editable" v-model="userTask.name"/>
        </el-col>
      </el-row>

      <el-row class="f-row">
        <el-col class="f-col f-text-right" :span="4">节点权限:</el-col>
        <el-col class="f-col" :span="18">
          <el-input value="审批" disabled/>
        </el-col>
      </el-row>

      <el-row class="f-row">
        <el-col class="f-col f-text-right" :span="4">节点说明:</el-col>
        <el-col class="f-col" :span="18">
          <el-input :disabled="!editable" v-model="userTask.desc" placeholder="请输入节点说明" type="textarea"/>
        </el-col>
      </el-row>
    </FSection>

    <FSection title="人员配置">
      <div style="border: 1px solid #e9e9eb; padding: 5px; max-height: 200px;
      overflow-y: auto; border-radius: 2px">
        <el-tree ref="userList" :disabled="!editable"
                 class="filter-tree f-list-tree"
                 :data="userTask.userConfigs"
                 :expand-on-click-node="false"
                 :default-expand-all="false"
                 :indent="9">
          <template v-slot="args">
            <div class="tree-select-item">
              {{args.data.configName}}
            </div>
          </template>
        </el-tree>
      </div>
    </FSection>

    <FSection title="执行模式">
      <el-radio-group :disabled="!editable" v-model="userTask.executeWay">
        <el-radio label="single">单人/竞争审批</el-radio>
        <el-radio label="multiple-serial">多人依次审批</el-radio>
        <el-radio label="multiple-paralle">多人同时审批</el-radio>
        <el-radio label="all">全体同时审批</el-radio>
      </el-radio-group>
      <div v-show="userTask.executeWay === 'multiple-paralle'">
        执行人数 >
        <el-input-number :disabled="!editable" :min="0" :max="100" v-model="userTask.executeCompleteThreshold"/>
      </div>
    </FSection>

    <FSection title="表单绑定">
      <el-form ref="taskPropertyForm" label-width="120px" :rules="taskPropertyRules" :model="userTask" inline>
        <el-form-item prop="pcViewId" label="电脑视图">
          <el-select :disabled="!editable" v-model="userTask.pcViewId" @change="pcViewChange" placeholder="请选择电脑视图">
            <el-option v-for="item in formDefinition.views" :key="item.id" :label="item.viewName" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="pcViewActionId" label="电脑权限">
          <el-select :disabled="!editable" v-model="userTask.pcViewActionId" placeholder="请选择电脑操作权限">
            <el-option v-for="item in pcViewActionOption" :key="item.id" :label="item.actionName" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="mobileViewId" label="移动端视图">
          <el-select :disabled="!editable" v-model="userTask.mobileViewId" @change="mobileViewChange" placeholder="请选择移动端视图">
            <el-option v-for="item in formDefinition.views" :key="item.id" :label="item.viewName" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="mobileViewActionId" label="移动端权限">
          <el-select :disabled="!editable" v-model="userTask.mobileViewActionId" placeholder="请选择移动端操作权限">
            <el-option v-for="item in mobileViewActionOption" :key="item.id" :label="item.actionName" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </FSection>
  </FModal>
</template>

<script>
import LayoutTitle from '@/components/flow/LayoutTitle';
import {guid, isEmpty, required} from '@/utils/CommonUtils';
import {ElNotification} from 'element-plus';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import FModal from '@/components/FModal/index.vue';
import FSection from '@/components/FSection/index.vue';

export default {
  name: "UserTaskPropertiesModal",
  components: {
    LayoutTitle,
    FModal,
    FSection,
  },
  props: {
    editable: {
      type: Boolean,
      default: true,

    }
  },
  data() {
    return {
      visible: false,
      formDefinition: JSON.parse(JSON.stringify(DefaultFormDefinition)),
      pcViewActionOption: [],
      mobileViewActionOption: [],
      taskPropertyRules: {
        pcViewId: [required],
        pcViewActionId: [required],
        mobileViewId: [required],
        mobileViewActionId: [required],
      },
      userTask: {
        id: null,
        executeWay: null,
        executeCompleteThreshold: null,
        name: null,
        pcViewId: undefined,
        pcViewActionId: undefined,
        mobileViewId: undefined,
        mobileViewActionId: undefined,
        desc: undefined,
        userConfigs: [
          {type: 'user', userId: undefined, userName: undefined},
          {type: 'depart', departId: undefined, departName: undefined},
          {
            type: 'role', departId: undefined, departName: undefined,
            roleId: undefined, roleName: undefined
          },
          {
            type: 'position', departId: undefined, departName: undefined,
            positionId: undefined, positionName: undefined
          }
        ]
      }
    };
  },
  methods: {
    setData(userTask, formDefinition) {
      this.formDefinition = formDefinition;
      if (!userTask) userTask = {};
      userTask = this.resolveDefaultValues(JSON.parse(JSON.stringify(userTask)));
      this.userTask = userTask;
      this.open();

    },
    open() {
      this.$refs.FModal.open();
      this.$nextTick(() => {
        this.pcViewChange(false);
        this.mobileViewChange(false);
      });
    },
    updateUserTask() {
      if (!this.editable) {
        this.close();
        return;
      }
      if (isEmpty(this.userTask.name)) {
        this.$message.warning('节点名称不能为空');
        return;
      }
      this.$refs.taskPropertyForm.validate((valid, errors) => {
        if (valid) {
          this.$emit('updateUserTask', this.userTask);
          this.close();
        } else {
          this.$message.warning('请将必填项填写完整');
        }
      });
    },
    resolveDefaultValues(userTask) {
      if (!userTask.executeWay) userTask.executeWay = 'single';
      if (!userTask.name) userTask.name = '审批';
      if (!userTask.userConfigs) userTask.userConfigs = [];
      if (!userTask.id) userTask.id = guid();
      if (!userTask.type) userTask.type = 'user';
      if (!userTask.executeCompleteThreshold) userTask.executeCompleteThreshold = 100;
      return userTask;
    },
    removeConfig(data) {
      this.userTask.userConfigs = this.userTask.userConfigs.filter(config => config !== data);
    },
    close() {
      this.$refs.FModal.close();
    },
    pcViewChange(resetViewAction = true) {
      if (isEmpty(this.formDefinition)) return;
      let list = this.formDefinition.viewActions;
      if (isEmpty(list)) list = [];
      list = list.filter(v => v.viewId === this.userTask.pcViewId);
      if (isEmpty(list)) list = [];

      this.pcViewActionOption = list;
      if (resetViewAction) {
        this.userTask.pcViewActionId = undefined;
      }
    },
    mobileViewChange(resetViewAction = true) {
      if (isEmpty(this.formDefinition)) return;
      let list = this.formDefinition.viewActions;
      if (isEmpty(list)) list = [];
      list = list.filter(v => v.viewId === this.userTask.mobileViewId);
      if (isEmpty(list)) list = [];

      this.mobileViewActionOption = list;
      if (resetViewAction) {
        this.userTask.mobileViewActionId = undefined;
      }
    },
    ok() {
      if (!this.userTask.name) {
        ElNotification({
          title: '任务名称不能为空',
          type: 'error',
        });
        return;
      }

      if (!this.userTask.userConfigs || !this.userTask.userConfigs.length) {
        ElNotification({
          title: '人员配置不能为空',
          type: 'error',
        });
        return;
      }
      this.$emit('ok', this.userTask);
      this.close();
    },
  }
};
</script>

<style scoped>
.this.userTask.userConfigs {
  user-select: none;
}

.tree-select-item {
  display: flex;
  height: 100%;
  align-items: center;
  width: 100%;
  user-select: none;
}
</style>
